<template>
  <ul class="ContentHomeList">
    <li v-for="InfoObj in Find" :key="InfoObj.id">
      <router-link
        :to="{
          name: 'videoDetil',
          query: {
            id: InfoObj.id,
            title: InfoObj.title,
            content: InfoObj.content,
            viewCount: InfoObj.viewCount.count_view,
            author: InfoObj.author,
            cate: InfoObj.cate,
            author: InfoObj.author,
            /*  title: InfoObj.content,
            ,
            viewCount: InfoObj.viewCount,
            ,
            authorFace: InfoObj.authorFace */
          },
        }"
        class="RouterStyle"
      >
        <img :src="InfoObj.cover" />
        <div class="info">
          <p class="title">
            {{ InfoObj.title }}
          </p>
          <p class="author">UP：{{ InfoObj.author }}</p>
        </div>
      </router-link>
    </li>
  </ul>
</template>
<script setup>
import axios from "axios";
import { ref, onBeforeMount } from "vue";
let Find = ref([]);

onBeforeMount(() => {
  axios.get("/mock/home").then((res) => {
    const GetFindData = res.data.data.list;
    let FindItems = [];
    for (let f of GetFindData) {
      let newFind = {
        id: f.id,
        title: f.title,
        cover: f.cover,
        id: f.id,
        cate: f.categories[0].category_name,
        content: f.content,
        viewCount: f.count,
        author: f.author.userinfo.username,
        authorFace: f.author.userinfo.avatar,
      };
      FindItems.push(newFind);
    }
    Find.value = FindItems;
  });
});
</script>
<style scoped lang="scss">
.ContentHomeList {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  padding: 1.5vw;
  color: #fff;
  box-sizing: border-box;
}

.ContentHomeList li {
  width: 95%;
  margin-bottom: 2vw;
  background-color: rgb(255, 255, 255);
  height: auto;
  border-radius: 10px;
  box-sizing: border-box;
  img {
    position: relative;
    top: 0;
    width: 100%;
    height: 60%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .info {
    padding: 2vw;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .info .title {
    font-size: 3.2vw;
    color: #000;
  }
  .info .author {
    font-size: 3vw;
    color: #ccc;
  }
}

.ContentHomeList li .routerLinkHome img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: cover;
}
</style>
